<template>
  <div>
    <nut-popup v-model="show1" position="bottom" :style="{ height: '65%'}" round>
      <div class="sku">
        <div class="header">
          <img
              :src="Object.keys(goodsinfo).length!== 0?goodsinfo.image:datalist.goodsimage" style="margin-right: 15px" />
          <div class="pclass" >
           <nut-price class="prices" :price="goodsinfo.price" :decimalDigits="2" :needSymbol="true" :thousands="true"/>
            <span class="number">编号：{{goodsinfo.id}}</span>
          </div>
        </div>
        <div class="centerdiv">
          <div class="fence">
            <div v-for="(item,index) in formlist">
              <h3>{{ formlist[index].title }}</h3>
              <ul>
                <li v-for="(t,i) in item.buttons">
                  <nut-button @click="addlei(t,i)" :type="xuanze[index]==i?'actived':'light'" shape="circle" small>{{ t.label }}</nut-button>
                </li>
              </ul>
            </div>
            <div class="stepper">
              <h3>数量</h3>
              <nut-stepper :readonly="true" :value.sync="value"></nut-stepper>
            </div>
          </div>
        </div>
        <div class="action">
          <nut-button block shape="circle" @click="toqd" :disabled="Object.keys(goodsinfo).length!== 0?false:true" >确定</nut-button>
        </div>
      </div>
    </nut-popup>
  </div>
</template>

<script scoped>


export default {
  name: "Specs",
  props: {
    show: {type: Boolean, default: false},
    datalist: {type: Object, default: {}}
  },
  data() {
    return {
      show1: false,
      formlist: [
        {
          title: '',
          buttons: []
        }
      ],
      tolist: [],
      cs: 0,
      goodsinfo:{},
      xuanze:[],
      value:1
    }
  },
  methods: {
    toobj: function (str) {
      var x = str;
      return JSON.parse(str).children;
    },
    //按钮点击事件
    addlei: function (t,index) {
          var cs=this.bfstree(JSON.parse(this.datalist.specs),t);
      this.xuanze[cs]=index;

      if (t.children[0].children.length!=0) {
          this.formlist[cs+1]=({
            title: this.layer[cs+1],
            buttons: t.children
          });
        this.xuanze[cs+1]=-1;
        this.goodsinfo={}
        this.$forceUpdate()
      } else {
        //写点按钮变商品逻辑
        var par=new URLSearchParams();
        par.append("id",t.children[0].label);
        this.$axios.get("/goodsinfo/selectOne",{params:par}).then(
            res=>{
              this.goodsinfo=res.data;
            }
        )

      }
    },
    toqd:function ()
    {
      this.show1=false;
      this.$emit("getGoodsInfoId",{'goodsinfo':this.goodsinfo,'number':this.value})
    },
    //寻找树枝在树中第几层，队列实现
    bfstree:function (root,t)
    {
      let Queue = (function(){
        const items = new WeakMap();
        class Queue{
          constructor(){
            items.set(this, []);
          }
          enqueue(ele){
            let q = items.get(this);
            q.push(ele);
          }
          dequeue(){
            let q = items.get(this);
            let res = q.shift();

            return res;
          }
          front(){
            let q = items.get(this, []);

            return q[0];
          }
          size(){
            let q = items.get(this, []);
            let len = q.length;
            return len;
          }
          isEmpty(){
            let q = items.get(this, []);
            return q.length == 0;
          }
          print(){
            let q = items.get(this, []);

          }
        }
        return Queue;

      })();
      var queue=new Queue;
      queue.enqueue(root)
      // while用于控制层数循环
      var p=0;//层数
      while (!queue.isEmpty()) {
        var size = queue.size();
        // for用于控制某层节点的遍历
        for (var i=0;i<size;i++) {
          var cur = queue.dequeue();
            for(var j=0;j<cur.children.length;j++)
            {
              queue.enqueue(cur.children[j]);
              if(this.isEqual(cur.children[j],t))
              {
                return p;
              }
            }
        }
        p++;
      }
    },
    //判断两个对象是否相等
    isEqual(objA,objB){
      //相等
      if(objA === objB) return objA !== 0 || 1/objA === 1/objB;
      //空判断
      if(objA == null || objB == null) return objA === objB;
      //类型判断
      if(Object.prototype.toString.call(objA) !== Object.prototype.toString.call(objB)) return false;

      switch(Object.prototype.toString.call(objA)){
        case '[object RegExp]':
        case '[object String]':
          //字符串转换比较
          return '' + objA ==='' + objB;
        case '[object Number]':
          //数字转换比较,判断是否为NaN
          if(+objA !== +objA){
            return +objB !== +objB;
          }

          return +objA === 0?1/ +objA === 1/objB : +objA === +objB;
        case '[object Date]':
        case '[object Boolean]':
          return +objA === +objB;
        case '[object Array]':
          //判断数组
          for(let i = 0; i < objA.length; i++){
            if (!this.isEqual(objA[i],objB[i])) return false;
          }
          return true;
        case '[object Object]':
          //判断对象
          let keys = Object.keys(objA);
          for(let i = 0; i < keys.length; i++){
            if (!this.isEqual(objA[keys[i]],objB[keys[i]])) return false;
          }

          keys = Object.keys(objB);
          for(let i = 0; i < keys.length; i++){
            if (!this.isEqual(objA[keys[i]],objB[keys[i]])) return false;
          }

          return true;
        default :
          return false;
      }
    },


  },
  watch: {
    show: function () {
      this.show1 = this.show;
    }
  },
  computed: {
    layer: function () {
      if (Object.keys(this.datalist).length > 0) {
        return this.datalist.specstitle.split(",");
      }
      return []

    },


  },
  mounted() {


  },
  beforeUpdate() {
    if (this.cs == 0) {
      if (typeof (this.datalist) != "undefined") {
        this.formlist = [
          {
            title: this.layer[0],
            buttons: this.toobj(this.datalist.specs)
          }
        ]
      }
      this.cs = 1;
    }
  }
}
</script>

<style scoped>
.sku {
  padding: 20px;
}

.header {
  height: 150px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  text-align: left;
}

.header img {
  width: 150px;
  height: 150px;
  margin-right: 10px;
}

.pclass {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  padding: 0px;
  margin: 0px;
  overflow: hidden;
  width: 40%;
}

.header p .price {
  padding: 0px;
  margin: 0px;
  font-size: 20px;
  font-weight: 200;
  color: red;
  overflow: hidden;
}

.header p .number {
  padding: 0px;
  margin: 0px;
  font-size: 10px;
  font-weight: 100;
  overflow: hidden;
}

.centerdiv {
  overflow-y: auto;
  height: 300px;

}

.fence {
  margin-top: 2%;
  height: 20%;
  padding-bottom: 40px;
}

.fence ul {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;

}

>>> .nut-button {
  margin-right: 10px;
  margin-bottom: 10px;
}

h3 {
  font-size: inherit;
  left: 0%;
}

.stepper {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.action {
  width: 90%;
  position: fixed;
  bottom: 0%;
}
.prices {
  color: #f31a00;
  font-size: 18px;
  font-weight: 700;


}

>>> .prices > .price-big {
  font-size:23px;
}

>>> .prices > .price-small {
  font-size: 18px;
}
.number{
  font-size: 12px;
  margin-top: 8px;
}
</style>
